<template>
  <div class="form-single-fragment" style="position: relative;">
    <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="140px" size="mini" label-position="right">
      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="项目名称" prop="projectName">
            <el-input class="input-item" v-model="ruleForm.projectName" placeholder="请输入"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="单位名称" prop="customerId">
            <el-select v-model="ruleForm.customerId" filterable placeholder="请选择">
              <el-option v-for="(item,index) in customerlist" :key="index"
                :label="item.custName" :value="item.id"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="所在地区" prop="areaId">
            <el-cascader v-model="ruleForm.areaId" ref="ref_areaCodes"
              :options="areaCodelist"
              :props="areaCodeprops"
              :show-all-levels="false"
              clearable
              @change="areaCodesChange"></el-cascader>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="项目开始时间" prop="beginDate">
            <el-date-picker v-model="ruleForm.beginDate" type="date" placeholder="选择日期"
            format="yyyy-MM-dd" value-format="yyyy-MM-dd"></el-date-picker>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="项目总投资(万元)" prop="projectName">
            <el-input class="input-item" v-model="ruleForm.projectTotalAmount" placeholder="请输入"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="项目完成时间" prop="endDate">
            <el-date-picker v-model="ruleForm.endDate" type="date" placeholder="选择日期"
            format="yyyy-MM-dd" value-format="yyyy-MM-dd"></el-date-picker>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="业务类型" prop="businessType">
            <el-cascader v-model="ruleForm.businessType"
              ref="ref_business"
              :options="businesstypeTree"
              :props="businesstProps"
              :show-all-levels="false"
              clearable
              @change="businessChange"></el-cascader>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="项目属性" prop="projectAttribute">
            <el-select v-model="ruleForm.projectAttribute" placeholder="请选择">
              <el-option label="公司项目" :value="1"></el-option>
              <el-option label="合作单位" :value="2" v-if="(cooperateFlag==1&&stageFlag==0)||(cooperateFlag==1&&stageFlag==1)"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="合作单位" prop="cooperateCompany" v-if="ruleForm.projectAttribute==2&&cooperateFlag==1&&stageFlag==1">
            <el-select v-model="ruleForm.cooperateCompany" placeholder="请选择">
              <el-option label="物产公司" :value="1"></el-option>
              <el-option label="刘玲群" :value="2"></el-option>
              <el-option label="其他单位" :value="3"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="项目标段" prop="stageNumber" v-if="ruleForm.stageNumber">
            <el-select v-model="ruleForm.stageNumber" placeholder="请选择">
              <el-option label="标段一" :value="1"></el-option>
              <el-option label="标段二" :value="2"></el-option>
              <el-option label="标段三" :value="3"></el-option>
              <el-option label="标段四" :value="4"></el-option>
              <el-option label="标段五" :value="5"></el-option>
              <el-option label="标段六" :value="6"></el-option>
              <el-option label="标段七" :value="7"></el-option>
              <el-option label="标段八" :value="8"></el-option>
              <el-option label="标段九" :value="9"></el-option>
              <el-option label="标段十" :value="10"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-form-item style="padding: 20px 0;">
        <el-button size="mini" @click="onCancel(false)">取消</el-button>
        <el-button type="primary" size="mini" @click="submitForm()">保存</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import { Administration } from '@/api/projectAdministration.js';
import { Businesstype } from '@/api/business.js';
import { EcologicalkKnowledge } from '@/api/knowledgeBases.js';
import { Customers } from '@/api/commercial.js';
export default {
  name: 'Synopsisadd',
  props: {
    projectId: {
      default: undefined
    }
  },
  data () {
    return {
      loading: false,
      isShowloading: false,
      userId: null,
      radio1: '0',
      value: new Date(),
      areaCodelist: [],
      areaCodeprops: {
        label: 'name',
        value: 'id',
        children: 'children',
        checkStrictly: true,
        emitPath: false
      },
      businessCode: '',
      stageFlag: '',
      cooperateFlag: '',
      businesstypeTree: [],
      businesstProps: {
        value: 'id',
        label: 'businessName',
        children: 'children',
        emitPath: false
      },
      customerlist: [],
      ruleForm: {
        areaId: '',
        beginDate: '',
        businessType: '',
        customerId: '',
        endDate: '',
        projectAttribute: '',
        cooperateCompany: '',
        projectName: '',
        stageNumber: ''
      },
      rules: {
        projectName: [{ required: true, message: '请输入', trigger: 'blur' }],
        customerId: [{ required: true, message: '请选择', trigger: 'change' }],
        beginDate: [{ required: true, message: '请选择', trigger: 'change' }],
        endDate: [{ required: true, message: '请选择', trigger: 'change' }],
        areaId: [{ required: true, message: '请选择', trigger: 'change' }],
        projectTotalAmount: [{ required: true, message: '请输入', trigger: 'change' }],
        businessType: [{ required: true, message: '请选择', trigger: 'change' }],
        projectAttribute: [{ required: true, message: '请选择', trigger: 'change' }],
        cooperateCompany: [{ required: true, message: '请选择', trigger: 'change' }],
        stageNumber: [{ required: true, message: '请选择', trigger: 'change' }]
      }
    };
  },
  created () {
  },
  computed: {
    isEdit () {
      return this.projectId != null && this.projectId !== '';
    }
  },
  mounted () {
    if (this.isEdit) {
      this.loadDetailWidgetData()
    }
  },
  methods: {
    /**
     * 项目简介
     */
    loadDetailWidgetData () {
      let params = {
        id: this.$route.query.projectId
      };
      return new Promise((resolve, reject) => {
        Administration.detail(this, params).then(res => {
          this.ruleForm = res.data
          this.ruleForm.areaId = parseInt(res.data.areaId)
          this.stageFlag = res.data.stageFlag
          this.cooperateFlag = res.data.cooperateFlag
          this.$forceUpdate()
          this.loadbusinesstypeTree()
          this.loadareaCodelistDict()
          this.loadCustomerList()
        }).catch(e => {
          reject(e);
        });
      });
    },
    /**
     * 客户列表
     */
    loadCustomerList () {
      let params = ''
      return new Promise((resolve, reject) => {
        Customers.lists(this, params).then(res => {
          this.customerlist = res.data
        }).catch(e => {
          reject(e);
        });
      });
    },
    /**
     * 业务类型信息表树形列表
     */
    loadbusinesstypeTree () {
      return new Promise((resolve, reject) => {
        Businesstype.tree(this).then(res => {
          this.businesstypeTree = res.data
        }).catch(e => {
          reject(e);
        });
      });
    },
    businessChange () {
      this.ruleForm.projectAttribute = ''
      let checkedNodes = this.$refs['ref_business'].getCheckedNodes()
      this.businessCode = checkedNodes[0].data.businessCode
      this.stageFlag = checkedNodes[0].data.stageFlag
      this.cooperateFlag = checkedNodes[0].data.cooperateFlag
      this.$refs['ref_business'].dropDownVisible = false
    },
    /**
     * 行政区划
     */
    loadareaCodelistDict () {
      return new Promise((resolve, reject) => {
        EcologicalkKnowledge.listDict(this).then(res => {
          let areaCodelist = res.data
          let areaCodelistnew = []
          areaCodelist.forEach((item, index) => {
            if (!item.parentId) {
              item.children = []
              areaCodelistnew.push(item)
            }
          })
          areaCodelistnew.forEach((item1, index1) => {
            let info = areaCodelist.find((item2, index2) => {
              return item1.id === item2.parentId
            })
            if (info) {
              item1.children = []
              areaCodelist.forEach((item3, index3) => {
                if (item1.id === item3.parentId) {
                  item1.children.push(item3)
                }
              })
            } else {
              item1.children = null
            }
          })
          areaCodelistnew.forEach((item4, index4) => {
            if (item4.children) {
              item4.children.forEach((item5, index5) => {
                let info2 = areaCodelist.find((item6, index6) => {
                  return item5.id === item6.parentId
                })
                if (info2) {
                  item5.children = []
                  areaCodelist.forEach((item7, index7) => {
                    if (item5.id === item7.parentId) {
                      item5.children.push(item7)
                    }
                  })
                } else {
                  item5.children = null
                }
              })
            }
          })
          this.areaCodelist = areaCodelistnew
        }).catch(e => {
          reject(e);
        });
      });
    },
    /**
     * 选择行政区划
     */
    areaCodesChange () {
      this.$refs['ref_areaCodes'].dropDownVisible = false
    },
    /**
     * 提交表单
     */
    submitForm () {
      this.$refs['ruleForm'].validate((valid) => {
        if (valid) {
          this.isShowloading = true;
          let params = {
            projectUpdateDto: this.ruleForm
          };
          return new Promise((resolve, reject) => {
            Administration.update(this, params).then(res => {
              this.$message({
                showClose: true,
                message: '修改成功！',
                type: 'success'
              });
              this.onCancel(true);
            }).catch(e => {
              reject(e);
            });
          });
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },
    onCancel (isSuccess) {
      if (this.observer != null) {
        this.observer.cancel(isSuccess);
      }
    }
  }
}
</script>
